<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./libs/template-web.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章类别管理
        </div>
        <div class="container-fluid common_con">
            <table class="table table-striped table-bordered table-hover mp20 category_table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>Slug</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>奇趣事</td>
                        <td>funny</td>
                        <td class="text-center">
                            <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal"
                                class=" btn btn-info btn-xs">编辑</a>
                            <a href="javascript:void(0)" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="text-center">
                            <a href="javascript:void(0)" class="btn btn-success" id="xinzengfenlei" data-toggle="modal"
                                data-target="#myModal">新增分类</a>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!-- 模态框 新增和编辑共用 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">New message</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <!-- 隐藏域 用于存储id -->
                            <input type="hidden" name="id" id="classifyId">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">分类名称:</label>
                            <input type="text" class="form-control" id="recipient-name" name='name'>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">分类别名:</label>
                            <input type="text" class="form-control" id="message-text" name='slug'>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id='modelCancel'>取消</button>
                    <button type="button" class="btn btn-primary" id="addOrEdit">Send message</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入地址js文件 -->
    <script src="./js/http.js"></script>
    <!-- 制作模板引擎 -->
    <script id="artList" type="text/html">
        <!-- 注意:传进来的是backData 所以变量直接写backData里成员data即可 -->
        {{each data v}}
    <tr>
        <td>{{v.name}}</td>
        <td>{{v.slug}}</td>
        <td class="text-center">
            <!-- 自定义类名 便于后面使用 -->
            <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal" class=" btn btn-info btn-xs"
                data_id='{{v.id}}'>编辑</a>
            <a href="javascript:void(0)" class="btn btn-danger btn-xs btn-delete" data_id='{{v.id}}'>删除</a>
        </td>
    </tr>
    {{/each}}
    </script>
    <script>
        // 入口函数
        $(function () {
            //一:获取文字类别的信息
            // 1.发出获取所有文章类别的ajax请求
            //因后面多次调用 所以封装个函数
            function getClassity() {
                $.ajax({
                    url: BigNew.category_list,
                    success: function (backData) {
                        // console.log(backData);
                        if (backData.code == 200) {
                            // 1.1将获得的数据填到模板中
                            let res = template('artList', backData);
                            // 2.利用模板引擎渲染到页面上
                            $('tbody').html(res);
                        }
                    }
                })
            };
            getClassity();


            // 二:区分新增按钮和编辑按钮并设置模态框的按钮样式

            //注意:通过show.bs.modal触发模态框弹出 而不是注册点击事件
            //注意:利用模态框实现,通过 data 属性调用 
            //新增和编辑共用一个模态框
            //1.使用show.bs.modal 事件的e.relatedTarget找到是谁触发了模态框,以区分新增按钮和编辑按钮
            //即e.relatedTarget 就可以拿到触发这个模态框显示的元素,是dom元素
            $('#myModal').on('show.bs.modal', function (e) {
                //e.relatedTarget访问(获取)的是DOM元素
                if (e.relatedTarget == $('#xinzengfenlei')[0]) {
                    // 1.1新增按钮 
                    $('#myModalLabel').text('新增分类');
                    $('#addOrEdit').text('新增').addClass('btn-primary').removeClass('btn-success');


                } else {
                    // 1.2模态框编辑按钮
                    $('#myModalLabel').text('编辑分类');
                    $('#addOrEdit').text('编辑').addClass('btn-success').removeClass('btn-primary');
                    // 1.2.1模态框弹出时,就获取用户信息
                    //注意:e.relatedTarget可以找到模态框的编辑按钮
                    $('#recipient-name').val($(e.relatedTarget).parent().prev().prev().text());
                    $('#message-text').val($(e.relatedTarget).parent().prev().text());
                    $('#classifyId').val($(e.relatedTarget).attr('data_id'));;
                }

            })

            // 三:为模态框addOrEdit按钮 新增/编辑 设置点击事件
            $('#addOrEdit').on('click', function () {
                // 1.再次区分是新增还是编辑 通过是否拥有类名区分
                // 1.1是否拥有btn-primary类名 拥有 则是新增按钮 否则是编辑按钮
                if ($(this).hasClass('btn-primary')) {
                    // 新增按钮
                    // 1.1.1获取用户信息
                    let classifyName = $('#recipient-name').val().trim();
                    let classifySlug = $('#message-text').val().trim();
                    // 1.1.2发出新增文章类别的ajax请求
                    $.ajax({
                        type: 'post',
                        url: BigNew.category_add,
                        data: {
                            name: classifyName,
                            slug: classifySlug
                        },
                        success: function (backData) {
                            if (backData.code == 201) {
                                alert(backData.msg);
                                getClassity();
                                // 1.1.3隐藏模态框
                                $('#myModal').modal('hide');
                                // 1.1.4清空文本内容
                                $('#recipient-name').val('');
                                $('#message-text').val('');
                            }
                        }
                    })
                } else {
                    // 编辑按钮
                    // 1.1.2获取修改后的文章信息
                    // 注意:新方法 利用jq中form的方法 serialize方法实现,与formdata相似 是获取拥有name属性的标签值
                    //以下简化
                    // let editName = $('#recipient-name').val().trim();
                    // let editSlug = $('#message-text').val().trim();
                    // let editId = $('#classifyId').val().trim();
                    let seriesdata = $('#myModal form').serialize();
                    console.log(seriesdata);

                    // 1.1.3发送编辑文章类别的ajax请求  
                    $.ajax({
                        type: 'post',
                        url: BigNew.category_edit,
                        data: seriesdata,
                        success: function (backData) {
                            if (backData.code == 200) {

                                alert('编辑成功');
                                getClassity();
                                // 1.1.4手动隐藏模态框
                                $('#myModal').modal('hide');
                                // 1.1.5清空文本内容
                                $('#recipient-name').val('');
                                $('#message-text').val('');
                            }


                        }
                    });

                }


            })

            //四:设置模态框取消按钮点击事件
            $('#modelCancel').on('click', function () {
                // 清空form表单内容
                //以下简化
                // $('#recipient-name').val('');
                // $('#message-text').val('');
                // 注意:新方法 form的reset()方面 是dom方法
                $('#myModal form')[0].reset();


            })


            //五:删除注册点击事件
            //注意:这用委托事件
            $('tbody').on('click', '.btn-delete', function () {
                // 1.获取当前删除按钮的id
                if (confirm('确认删除吗?')) {
                    let deletId = $(this).attr('data_id');
                    // console.log(deletId);
                    2. //发出删除文章类的ajax请求
                    $.ajax({
                        type: 'post',
                        url: BigNew.category_delete,
                        data: {
                            id: deletId
                        },
                        success: function (backData) {
                            if (backData.code == 204) {
                                // console.log(backData);
                                // 3.再次重新获取所有文章类别信息
                                alert('删除成功');
                                getClassity();
                            }

                        }
                    })
                }
            })
        })
    </script>

</html>